<template>
  <div class="good-tab-bar-style">
    <div class="title">商品选项卡</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <el-form-item label="是否固定头部" prop="isFixedHead">
        <el-radio-group v-model="datas.isFixedHead">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="items" v-for="(tab, ix) in datas.list" :key="ix">
        <div class="close">
          <el-icon @click="onDelTab(ix)"><Close /></el-icon>
        </div>
        <el-form-item label="商品来源" prop="type">
          <el-radio-group v-model="tab.type">
            <el-radio label="auto">自动获取</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品分类" prop="classifyId">
          <el-select v-model="tab.classifyId">
            <el-option v-for="item in classify" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌分类" prop="branId">
          <el-select v-model="tab.branId">
            <el-option v-for="item in brands" :key="item.id" :label="item.id" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="显示数量" prop="limit">
          <el-input-number v-model="tab.limit" :min="1" :controls="false" />
        </el-form-item>
        <el-form-item label="分列数量" prop="column">
          <el-radio-group v-model="tab.column">
            <el-radio :label="1">单列</el-radio>
            <el-radio :label="2">两列</el-radio>
            <el-radio :label="3">三列</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Tab大标题名称" prop="title">
          <el-input v-model="tab.title" />
        </el-form-item>
        <el-form-item label="Tab子标题名称" prop="subTitle">
          <el-input v-model="tab.subTitle" />
        </el-form-item>
      </div>
    </el-form>
    <el-button class="w100" type="primary" plain @click="addTab">点击添加Tab</el-button>
  </div>
</template>

<script lang="ts" setup name="GoodTabBarStyle">
import { ref, toRefs, onMounted } from "vue";
import { getWaresBrandList, getWaresCategoryList } from "@/api/modules/inventory";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
const classify = ref([]);
const brands = ref([]);
onMounted(async () => {
  const [brand, category] = await Promise.all([getWaresBrandList({ pageNum: 1, pageSize: 9999 }), getWaresCategoryList()]);
  brands.value = brand.data.list;
  classify.value = category.data;
});
const onDelTab = (ix: number) => {
  datas.value.list.splice(ix, 1);
};

const addTab = () => {
  datas.value.list.push({
    type: "auto",
    limit: 10,
    column: 2,
    isShow: true,
    title: "选项卡名称",
    subTitle: "子标题",
    list: [
      { name: "此处显示商品组名称", price: 99, image: "src/assets/images/empty-banner.png" },
      { name: "此处显示商品组名称", price: 99, image: "src/assets/images/empty-banner.png" },
      { name: "此处显示商品组名称", price: 99, image: "src/assets/images/empty-banner.png" },
      { name: "此处显示商品组名称", price: 99, image: "src/assets/images/empty-banner.png" }
    ]
  });
};
</script>

<style scoped lang="scss">
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.items {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  .close {
    display: flex;
    flex-direction: row-reverse;
    padding: 8px;
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #f2f2f2;
  }
}
</style>
